<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <script type="text/javascript" src="static/js/axios.min.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <title>Document</title>
</head>


<style>
    .el-table .warning-row {
        background: rgb(126, 238, 35);
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    /*
    包裹表格div的距離外邊距的距離
    width:85% 為寬度
    margin：為左边距
    margin-top為右边距
    */

    #app {
        width: 100%;

    }
</style>

<body>
<div id="app">
    <!--查询框-->
    <el-row>
        <el-col :span="2">模型名称</el-col>
        <el-col :span="5">
            <el-input
                    style="width: 180px"
                    v-model="name"
                    size="small"
                    placeholder="请输入内容"
            ></el-input>
        </el-col>
        <el-col :span="8">
            <el-button type="primary" icon="el-icon-search" size="small" @click="getData()">查询</el-button>
            <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="dialogFormVisibleAdd = true">新增</el-button>
            <el-button type="primary" size="small" icon="el-icon-download" @click="exportData()">导出</el-button>
            <el-upload
                    style="position: relative;left: 263px;top: -32px"
                    class="upload-demo"
                    action="proc/importExcel"
                    :show-file-list="false"
                    :on-success="excelSuccess"
                    multiple>
                <el-button size="small"  type="primary"><i class="el-icon-upload">&nbsp;&nbsp;上传</i></el-button>
                <div slot="tip"  class="el-upload__tip">上传excel文件</div>
            </el-upload>

        </el-col>
    </el-row>
    <br>
    <!--table 模板  ：data 绑定了数据 tableData-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
            <el-table-column
                    prop="num"
                    label="编号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="模型名称"
                    width="160">
            </el-table-column>
            <el-table-column
                    prop="tag"
                    label="模型标识"
                    width="210">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="分类"
                    width="150">
            </el-table-column>
            <el-table-column
                    :formatter="dataFormat"
                    prop="createTime"
                    label="创建时间"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <!--handleClick 为点击查看点击事件,括号内的scope.row为当前行的所有参数,要拿什么参数,直接 scope.row参数名-->
                    <el-button type="text" size="small" @click="findDetail(scope.row)" >查看</el-button>
                    <el-button type="text" size="small" @click="edit(scope.row)" >修改</el-button>
                    <el-button type="text" size="small" @click=del(scope.row.id)>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--Element分頁插件 有待改进-->
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="totalCount">
        </el-pagination>
    </template>
    <!--新增数据模态框-->
    <el-dialog title="新增流程模型" :visible.sync="dialogFormVisibleAdd">
        <el-form :model="addDiaForm" :inline="true" id="addForm">
            <el-form-item label="模型名称" :label-width="formLabelWidth">
                <el-input v-model="addDiaForm.name" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="模型标识" :label-width="formLabelWidth">
                <el-input v-model="addDiaForm.tag" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="分类" :label-width="formLabelWidth">
                <el-input v-model="addDiaForm.type" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="流程图" :label-width="formLabelWidth">
                <el-input v-model="addDiaForm.processImg" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>
            <el-upload
                    style="position: relative;left: 120px"
                    class="upload-demo"
                    action="proc/importImg"
                    :show-file-list="false"
                    :on-success="fileSuccess"
                    multiple>
                <el-button size="small"  type="primary"><i class="el-icon-upload">&nbsp;&nbsp;上传</i></el-button>
                <div slot="tip"  class="el-upload__tip">上传流程图</div>
            </el-upload>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="exitDia();dialogFormVisibleAdd = false">取 消</el-button>
            <el-button type="primary" @click="saveForm">确 定</el-button>
        </div>
    </el-dialog>
    <!--修改数据模态框-->
    <el-dialog title="编辑流程模型" :visible.sync="dialogFormVisibleEdit">
        <el-form :model="editDiaForm" :inline="true">
            <el-form-item label="模型名称" :label-width="formLabelWidth">
                <el-input v-model="editDiaForm.name" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="模型标识" :label-width="formLabelWidth">
                <el-input v-model="editDiaForm.tag" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="分类" :label-width="formLabelWidth">
                <el-input v-model="editDiaForm.type" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateForm()">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>

<script type="text/javascript" th:inline="javascript">
    let demo = new Vue({
        el: "#app", //绑定的div
        data() {
            return {
                tableData:[],    // 总数据
                currentPage:1,  // 默认显示第几页
                totalCount:1,   // 总条数，根据接口获取数据长度(注意：这里不能为空)
                PageSize:10,     // 默认每页显示的条数（可修改）
                name:"",     //模型名称

                dialogFormVisibleAdd:false,     //新增数据模态框默认状态
                dialogFormVisibleEdit:false,    //修改数据模态框默认状态

                formLabelWidth: '120px',
                addDiaForm:{    //新增模态框中的数据
                    name:"",     //模型名称
                    tag:"",     //模型标识
                    type:"",     //分类
                    processImg:"",      //流程图
                },
                editDiaForm:{   //修改模态框中的数据
                    name:"",     //模型名称
                    tag:"",     //模型标识
                    type:1,     //分类
                    id:"",       //id
                }
            };
        },

        methods: {
            //为鼠标移动上去的js样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'success-row';
                } else if (rowIndex % 2 === 2) {
                    return 'warning-row';
                }
                return '';
            },

            //时间格式转换
            dataFormat: function(row,column) {
                //获取表格数据
                let data = row[column.property]
                if (data === null) {
                    return ''
                }
                let dt = new Date(data)
                return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' '
                    + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
            },

            //上传数据的回调函数
            fileSuccess(res){
                console.log(res);
                if(res.code == 200){
                    this.$message({
                        message: '上传成功',
                        type: 'success'
                    });
                    this.addDiaForm.processImg = res.data;
                    this.getData();
                }else {
                    this.$message.error("上传失败");
                }
            },

            //上传excel的回调函数
            excelSuccess(res){
                console.log(res);
                if(res.code == 200){
                    this.$message({
                        message: '导入成功',
                        type: 'success'
                    });
                    this.getData();
                }else {
                    this.$message.error("导入失败");
                }
            },

            //导出数据
            exportData : function(){
                axios({
                    url:"proc/export",
                    method:"post",
                    data:JSON.stringify(this.tableData),
                    headers:{
                        'Content-Type':'application/json',
                    }
                }).then(reponse => {
                    console.log(reponse);
                    if(reponse.data.code == 200){
                        let a = document.createElement("a");    //创建a标签元素
                        let bodyEl = document.body;    //获取到body节点
                        bodyEl.appendChild(a);
                        a.setAttribute("href","proc/getData?fileName=" + reponse.data.data);   //给a标签设置href值
                        a.click();
                        bodyEl.removeChild(a);
                        this.$message({
                            message: '导出成功',
                            type: 'success'
                        });
                    }else {
                        this.$message.error("导出失败");
                    }
                });
            },

            //清空新增模态框中的数据
            exitDia(){
                document.getElementById("addForm").reset();
            },

            //绑定数据
            edit : function(row){
                this.editDiaForm.name = row.name;
                this.editDiaForm.tag = row.tag;
                this.editDiaForm.type = row.type;
                this.editDiaForm.id = row.id;
                this.dialogFormVisibleEdit = true;
            },

            //修改数据
            updateForm : function(){
                axios.get("proc/update", {
                        params: {
                            name: this.editDiaForm.name,
                            tag: this.editDiaForm.tag,
                            type: this.editDiaForm.type,
                            id:this.editDiaForm.id
                        }
                    }
                ).then(reponse=>{
                    if(reponse.data.code == 200){
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.getData();   //刷新界面
                    }else {
                        this.$message.error('修改失败');
                    }
                    this.dialogFormVisibleEdit=false;    //关闭模态框
                    this.exitDia();     //清除模态框中的数据
                })
            },

            //查看详情
            findDetail : function(row){
                window.location.href="process_detail" + "?fileName=" + encodeURI(row.processImg);
            },

            //新增数据
            saveForm : function(){
                let dt = this.addDiaForm;
                if(dt.name=='' || dt.tag=='' || dt.type=='' || dt.processImg==''){
                    this.$message.error("新增内容每一项都不能为空");
                }else {
                    axios.get("proc/save", {
                            params: {
                                name: this.addDiaForm.name,
                                tag: this.addDiaForm.tag,
                                type: this.addDiaForm.type,
                                processImg: this.addDiaForm.processImg,
                            }
                        }, {emulateJSON: true},
                        {
                            headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
                        }
                    ).then(reponse=>{
                        if(reponse.data.code == 200){
                            this.$message({
                                message: '新增成功',
                                type: 'success'
                            });
                        }else {
                            this.$message.error('新增失败');
                        }
                        this.dialogFormVisibleAdd=false;    //关闭模态框
                        this.exitDia();     //清除模态框中的数据
                        this.getData(this.PageSize,this.currentPage);   //重新发送数据
                    })  //axios结束
                }
            }, //新增数据方法截止
            //删除数据

            //删除数据
            del : function(id){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("proc/delete", {
                            params: {
                                id:id,
                            }
                        }
                    ).then(reponse=>{
                        if(reponse.data.code == 200){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });

                        }else {
                            this.$message.error('删除失败');
                        }
                        this.dialogFormVisibleEdit=false;    //关闭模态框
                        this.getData(this.PageSize,this.currentPage);   //刷新界面
                        this.exitDia();     //清除模态框中的数据
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },//删除方法截止

            //分页
            // 将页码，及每页显示的条数以参数传递提交给后台
            getData(){
                // 这里使用axios，使用时请提前引入
                axios.get("proc/page",{
                        params:{
                            limit:this.PageSize,
                            pageNum:this.currentPage,
                            name:this.name
                        }
                    }, {emulateJSON: true},
                    {
                        headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
                    }
                ).then(reponse=>{
                    // 将数据赋值给tableData
                    this.tableData=reponse.data.rows;
                    // 将数据的长度赋值给totalCount
                    this.totalCount=reponse.data.total;
                })
            },
            // 显示第几页
            handleCurrentChange(val) {
                // 改变默认的页数
                this.currentPage=val
                // 切换页码时，要获取每页显示的条数
                this.getData()
            },
        },//method方法截止
        created:function(){
            this.getData(this.PageSize,this.currentPage)
        }
    });
</script>
</html>